<template>
  <div id="sideBar">
    <el-scrollbar style="height:100%">
      <el-menu
        :default-active="defaultPath"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#272822"
        text-color="#fff"
        active-text-color="#3481BF"
        :router="true"
        :unique-opened="true"
      >
        <!-- 查询 -->
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-search"></i>
            <span>查询</span>
          </template>
          <el-menu-item index="/studentInfos">
            <i class="el-icon-document"></i>
            <span>学生信息查询</span>
          </el-menu-item>
          <el-menu-item index="/grade">
            <i class="el-icon-finished"></i>
            <span>学生成绩排名</span>
          </el-menu-item>
          <el-submenu index="1-2">
            <template slot="title">
              <i class="el-icon-tickets"></i>
              <span>学科成绩排名</span>
            </template>
            <el-menu-item index="/subject/english" class="thirdMenu">
              <svg-icon icon-class="E"></svg-icon>
              <span class="thirdMenuText">英语</span>
            </el-menu-item>
            <el-menu-item index="/subject/math" class="thirdMenu">
              <svg-icon icon-class="M"></svg-icon>
              <span class="thirdMenuText">数学</span>
            </el-menu-item>
            <el-menu-item index="/subject/chinese" class="thirdMenu">
              <svg-icon icon-class="C"></svg-icon>
              <span class="thirdMenuText">语文</span>
            </el-menu-item>
          </el-submenu>
        </el-submenu>
        <!-- 班级 -->
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>班级</span>
          </template>
          <el-menu-item index="/seatMap">
            <i class="el-icon-menu"></i>
            <span slot="title">座位图</span>
          </el-menu-item>
        </el-submenu>
        <!-- 题库 -->
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span>题库</span>
          </template>
          <el-menu-item index="/chinese">
            <i class="el-icon-document"></i>
            <span slot="title">语文</span>
          </el-menu-item>
          <el-menu-item index="/math">
            <i class="el-icon-document"></i>
            <span slot="title">数学</span>
          </el-menu-item>
          <el-menu-item index="/english">
            <i class="el-icon-document"></i>
            <span slot="title">英语</span>
          </el-menu-item>
        </el-submenu>
        <!-- 公告发布 -->
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>公告发布</span>
          </template>
          <el-menu-item index="/announce">
            <i class="el-icon-setting"></i>
            <span slot="title">公告发布</span>
          </el-menu-item>
        </el-submenu>
        <!-- 数据大屏 -->
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span>数据可视化</span>
          </template>
          <el-menu-item index="/dataview">
            <i class="el-icon-document"></i>
            <span slot="title">数据大屏</span>
          </el-menu-item>
        </el-submenu>
        <!-- 设置 -->
        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>系统设置</span>
          </template>
          <el-menu-item index="/userinfos">
            <i class="el-icon-setting"></i>
            <span slot="title">个人资料</span>
          </el-menu-item>
          <el-menu-item index="/permissions">
            <i class="el-icon-setting"></i>
            <span slot="title">权限设置</span>
          </el-menu-item>
          <el-menu-item index="/role">
            <i class="el-icon-setting"></i>
            <span slot="title">角色设置</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "sideBar",
  components: {},
  data() {
    return {
      defaultPath: "/studentInfos"
    };
  },
  created() {
    this.getDefaultPath();
  },
  watch: {
    // 路由监听：监听路由的变化，从而做出相应操作
    $route: {
      immediate: true, // 一旦监听到路由的变化立即执行
      handler(to, from) {
        let path = to.path;
        localStorage.setItem("path", path);
        this.getDefaultPath();
      }
    }
  },
  methods: {
    getDefaultPath() {
      // localStorage.setItem(this.$route.path);
      let currentDefaultPath = localStorage.getItem("path");
      this.defaultPath = currentDefaultPath
        ? currentDefaultPath
        : "/studentInfos";
      console.log(this.defaultPath);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>
<style lang="scss" scoped>
#sideBar {
  //   position: absolute;
  //   top: 40px;
  overflow: auto;
  position: fixed;
  height: 100%;
  width: 200px;
  background-color: #272822;
}
.thirdMenu {
  display: flex;
  align-items: center;
}
.thirdMenuText {
  margin-left: 5px;
}
</style>
